import { Component,OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Subject }  from 'rxjs/Subject';

import { HeroSearchService } from './hero-search.service';
import { Hero } from './hero';

@Component({
	moduleId: 'module.id',
	selector:'hero-search',
	templateUrl:'./hero-search.component.html',
	styleUrls:['./hero-search.component.css'],
	providers:[HeroSearchService]
})

export class HeroSearchComponent implements OnInit {
	heroes: Observable<Hero[]>;
	private searchTerms = new Subject<string>();

	constructor(
		private heroSearchService: HeroSearchService,
		private router: Router) {}

	search(term:string):void{
		this.searchTerms.next(term);
	}

	ngOnInit(): void {
	    this.heroes = this.searchTerms
	      .debounceTime(300)        // 300毫秒之后才发送请求
	      .distinctUntilChanged()   // 只有条件改变了才发送请求
	      .switchMap(term => term   // switch to new observable each time
	        // return the http search observable
	        ? this.heroSearchService.search(term)
	        // or the observable of empty heroes if no search term
	        : Observable.of<Hero[]>([]))
	      .catch(error => {
	        // TODO: real error handling
	        console.log(error);
	        return Observable.of<Hero[]>([]);
	      });
	}

	gotoDetail(hero: Hero): void {
	    let link = ['/detail', hero.id];
	    this.router.navigate(link);
	  }
}